<template>
  <el-form :inline="true" ref="ruleForm" :model="formInline" class="demo-form-inline">
    <el-form-item label="结算月份" prop="settleDate">
      <el-date-picker
        v-model="formInline.settleDate"
        unlink-panels
        type="month"
        align="right"
        value-format="yyyy-MM">
      </el-date-picker>
    </el-form-item>
    <el-form-item class="with-pre-select" prop="keywords">
      <el-input @keyup.enter.native="handleFilter" placeholder="请输入关键词" v-model="formInline.keywords" class="input-with-select">
        <el-select v-model="formInline.searchType" slot="prepend" placeholder="请选择查询范围">
          <el-option label="代理账号名" value="1"></el-option>
          <el-option label="姓名" value="2"></el-option>
        </el-select>
        <!--<el-button slot="append" icon="el-icon-search"></el-button>-->
      </el-input>
    </el-form-item>
    <el-form-item label="账号状态">
      <el-select v-model="formInline.userStatus" placeholder="请选择状态">
        <el-option
          label="全部"
          value=""
        ></el-option>
        <el-option
          v-for="item in consts.AGENCY_STATUS"
          :label="item.title"
          :key="item.value"
          :value="item.value"
          v-if="![3,4,-1].includes(item.value)"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="手续费方案" prop="feeRule">
      <el-select v-model="formInline.feeRule" placeholder="请选择手续费方案">
        <el-option
          v-for="item in commSeleList"
          :label="item.name"
          :key="item.id"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="佣金方案类型" prop="commMode">
      <el-select v-model="formInline.commMode" placeholder="请选择佣金方案类型">
        <el-option
          v-for="item in agencyEnum.COMMISSION_TYPE"
          :label="item.title"
          :key="item.value"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="会员返佣方案" prop="cashRule">
      <el-select v-model="formInline.cashRule" placeholder="请选择会员返佣方案">
        <el-option
          v-for="item in commCaseSeleList"
          :label="item.name"
          :key="item.id"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="实际合计发放">
      <el-col :span="11">
        <el-form-item prop="minAmount">
          <el-input @keyup.enter.native="handleFilter" v-model="formInline.minAmount" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="maxAmount">
          <el-input @keyup.enter.native="handleFilter" v-model="formInline.maxAmount" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
    </el-form-item>
    <!--<el-form-item label="审核人" prop="auditFirManager">
    <el-select v-model="formInline.auditFirManager" placeholder="请选择一审人">
    <el-option
    v-for="item in auditFirList"
    :label="item.name"
    :key="item.id"
    :value="item.id"
    ></el-option>
    </el-select>
    </el-form-item>-->
    <el-form-item label="审核状态" prop="status">
      <el-select v-model="formInline.status" placeholder="请选择状态">
        <el-option
          label="全部"
          :value="undefined"
        ></el-option>
        <el-option
          v-for="item in consts.COMMISSION_AUDIT_STATUS"
          v-if="item.value != -1"
          :label="item.title"
          :key="item.value"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-button class="filter-item" type="primary" :loading="loading" icon="el-icon-search" @click="handleFilter">搜索
    </el-button>
    <el-button
      v-if="roleCheck('export')"
      type="primary"
      size="mini"
      icon="el-icon-download"
      @click="_exportExcel"
      :loading="downLoading"
    >
      导出
    </el-button>
    <el-button @click="selfResetForm('ruleForm')">重置</el-button>
  </el-form>

</template>

<script>

// build
import { form, pickerOption } from '@/build';

export default {
  name: 'settlement-audit-filter',
  mixins: [form, pickerOption],
  props: {
    commSeleList: {
      type: Array,
      required: true,
      default: () => [],
    },
    commCaseSeleList: {
      type: Array,
      default: () => [],
    },
    downLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formInline: {
        settleDate: moment().format('YYYY-MM'),
        status: undefined,
        feeRule: -1,
        commMode: -1,
        cashRule: -1,
        userStatus: undefined,
      },
      stepFir: { step: 1 },
      stepSec: { step: 2 },
    };
  },
  methods: {
    _exportExcel() {
      this.$emit('on-export', this.formInline);
    },
    handleFilter() {
      this.$emit('on-filter', this.formInline);
    },
    selfResetForm(formName) {
      this.resetForm(formName);
      this.handleFilter();
    },
  },
};
</script>

<style lang="scss" scoped>
  .with-pre-select {
    .el-input-group__prepend {
      .el-select {
        width: 160px;
      }
    }
  }

  .money-range {
    .el-input {
      width: 100px;
    }
  }

</style>
